<!--全宗管理-->
<template>
  <div class="folder-manage">
    <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)' }">
      <div slot="title">
        <div class="top-icon">
          <icon-font type="icon-quanzong" />
        </div>
        <span>全宗管理</span>
      </div>
      <div slot="extra">
        <a-dropdown placement="bottomRight">
          <a-button type="primary" icon="upload" class="icon-button">全宗操作</a-button>
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="floderClick('add')"><a-icon type="plus" />全宗新增</a-menu-item>
            <a-menu-divider />
            <a-menu-item key="2" @click="floderClick('edit')"><a-icon type="edit" />全宗编辑</a-menu-item>
            <a-menu-divider />
            <a-menu-item key="3" @click="floderClick('del')"><a-icon type="delete" />全宗删除</a-menu-item>
          </a-menu>
        </a-dropdown>
        <a-button type="primary" icon="plus" @click="classConfig.modalVisible = true" class="icon-button">门类关联</a-button>
        <a-button type="primary" icon="plus" @click="FMClick('add')">新增归档方式</a-button>
      </div>
      <div class="card-table">
        <div class="folder-left" :style="{width: (isShowLeftTree ? '0': '18%')}">
          <div class="folder-left-tree" v-if="!isShowLeftTree">
            <a-tree
              blockNode
              show-line
              :treeData="treeData"
              defaultExpandAll
              v-if="treeData.length > 0">
            </a-tree>
            <a-empty v-else />
          </div>
          <div class="handle" @click="treeToggle">
            <img src="@/assets/images/leftTree-show.png" alt="" v-if="!isShowLeftTree">
            <img src="@/assets/images/leftTree-hide.png" alt="" v-else>
          </div>
        </div>
        <div class="folder-right" :style="{width: (isShowLeftTree ? 'calc(100% - 1px)': '82%')}">
          <div class="folder-right-top">
            <el-table
              :data="categoryTableData"
              highlight-current-row
              border
              height="100%"
              :row-style="{height:'40px'}"
              :cell-style="{padding:'0px'}"
              :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
              style="width: 100%">
              <slot v-for="(item,index) in categoryColumns">
                <el-table-column
                  :key="index"
                  :property="item.field"
                  :label="item.title"
                  :width="item.width"
                  show-overflow-tooltip
                  sortable>
                </el-table-column>
              </slot>
            </el-table>
          </div>
          <div class="folder-right-bottom">
            <el-table
              :data="folderTableData"
              highlight-current-row
              border
              height="100%"
              :row-style="{height:'40px'}"
              :cell-style="{padding:'0px'}"
              :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
              style="width: 100%">
              <slot v-for="(item,index) in folderColumns">
                <el-table-column
                  :key="index"
                  :property="item.field"
                  :label="item.title"
                  :width="item.width"
                  show-overflow-tooltip
                  sortable>
                </el-table-column>
              </slot>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <a @click="FMClick('edit', scope.row)">编辑</a>
                  <a-divider type="vertical" />
                  <a @click="FMClick('del', scope.row)">删除</a>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </a-card>

    <!-- 全宗树弹出框 -->
    <a-modal
      :maskClosable="false"
      :title="modalTitle"
      v-model="dialogFormVisible">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :form="form1">
        <a-form-item label="全宗名称" >
          <a-input v-decorator="[ 'Fonds_Name', {rules: [{ required: true, message: '请输入全宗名称!' }]} ]" />
        </a-form-item>
        <a-form-item label="全宗代码">
          <a-input v-decorator="['Fonds_Code', {rules: [{ required: true, message: '请输入全宗代码!' }]} ]" />
        </a-form-item>
        <a-form-item label="顺序号">
          <a-input type="number" v-decorator="[ 'Fonds_Order' ]" />
        </a-form-item>
        <a-form-item label="级别">
          <a-input v-decorator="[ 'Fonds_Level' ]" />
        </a-form-item>
        <a-form-item label="进馆号">
          <a-input v-decorator="[ 'Fonds_JGH' ]" />
        </a-form-item>
        <a-form-item label="进馆目录号">
          <a-input v-decorator="[ 'Fonds_JGMLH' ]" />
        </a-form-item>
        <a-form-item label="备注">
          <a-input type="textarea" v-decorator="[ 'Fonds_Remark' ]" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 门类归档方式弹出框 -->
    <a-modal
      :maskClosable="false"
      :title="FMConfig.modalTitle"
      v-model="FMConfig.modalVisible"
      width="40%">
      <a-form
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        :form="form2">
        <a-form-item label="预归档平台(默认)">
          <a-input v-decorator="['FM_OCName',{rules: [{ required: true, message: '请正确填写!' }]}]" />
        </a-form-item>
        <a-form-item label="预归档平台代号(默认)">
          <a-input v-decorator="['FM_OEName', {rules: [{ required: true, message: '请正确填写!' }]}]" />
        </a-form-item>
        <a-form-item label="启用预归档档号触发">
          <a-checkbox v-decorator="['FM_CodeAuto1', {valuePropName: 'checked', initialValue: true }]" />
        </a-form-item>
        <a-form-item label="档案接收">
          <a-input v-decorator="['FM_OCName_YLJ']" />
        </a-form-item>
        <a-form-item label="档案接收代号">
          <a-input v-decorator="['FM_OEName_YLJ']" />
        </a-form-item>
        <a-form-item label="启用档案接收档号触发">
          <a-checkbox v-decorator="['FM_CodeAuto2', {valuePropName: 'checked', initialValue: true }]" />
        </a-form-item>
        <a-form-item label="档案整理">
          <a-input v-decorator="['FM_OCName_DSP']" />
        </a-form-item>
        <a-form-item label="档案整理代号">
          <a-input v-decorator="['FM_OEName_DSP']" />
        </a-form-item>
        <a-form-item label="启用档案整理档号触发">
          <a-checkbox v-decorator="['FM_CodeAuto3', {valuePropName: 'checked', initialValue: true }]" />
        </a-form-item>
        <a-form-item label="顺序号">
          <a-input type="number" v-decorator="['FM_Index',{}]" />
        </a-form-item>
        <a-form-item label="卷内导入配置">
          <a-input v-decorator="['FC_InputJNGZ',{}]" />
        </a-form-item>
        <a-form-item label="备注">
          <a-input type="textarea" v-decorator="['FM_Remark',{}]"/>
        </a-form-item>
        <a-form-item label="非业务档案">
          <a-checkbox v-decorator="['FM_IsWorkFlow', {valuePropName: 'checked'}]" />
        </a-form-item>
        <a-form-item label="是否降序">
          <a-checkbox v-decorator="['FM_IsDesc', { valuePropName: 'checked' }]"/>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 数据关联弹出框 -->
    <a-modal
      :maskClosable="false"
      title="数据关联"
      v-model="classConfig.modalVisible">
      <a-transfer
        :data-source="classConfig.classData"
        :listStyle="{
          width: '214px',
          height: '300px',
        }"
        :titles="['未选择', '已选择']"
        :target-keys="classConfig.targetKeys"
        @change="handleChange"
        :render="item => item.title"
        style="display: flex;justify-content: center;align-items: center;"/>
    </a-modal>
  </div>
</template>

<script>
import pick from 'lodash.pick'
export default {
  name: 'FolderManage',
  components: {
  },
  data () {
    return {
      isShowLeftTree: false, // 左侧显示与隐藏
      treeData: [
        {
          title: '研发中心测试全宗',
          key: '1',
          children: [
            { title: '测试全宗1', key: '1-1' },
            { title: '测试全宗2', key: '1-2' },
            { title: '测试全宗3', key: '1-3' },
            { title: '测试全宗4', key: '1-4' },
            { title: '测试全宗5', key: '1-5' },
            { title: '测试全宗6', key: '1-6' }
          ]
        }
      ],
      categoryTableData: [
        {
          Class_Order: '1',
          Class_Code: 'DQ',
          Class_Name: '党群管理档案'
        },
        {
          Class_Order: '2',
          Class_Code: 'XZ',
          Class_Name: '行政管理档案'
        },
        {
          Class_Order: '3',
          Class_Code: 'SS',
          Class_Name: '诉讼档案'
        }
      ],
      categoryColumns: [
        {
          title: '顺序号',
          field: 'Class_Order'
        },
        {
          title: '门类代码',
          field: 'Class_Code'
        },
        {
          title: '门类名称',
          field: 'Class_Name'
        }
      ],
      folderTableData: [
        {
          FM_Index: '1',
          FM_OCName: '数据汇总以卷整理',
          FM_OEName: 'SJHZ',
          FM_Remark: '11'
        },
        {
          FM_Index: '2',
          FM_OCName: '党群档案以件整理',
          FM_OEName: 'DQYJ',
          FM_Remark: '22'
        },
        {
          FM_Index: '3',
          FM_OCName: '诉讼档案',
          FM_OEName: 'SS',
          FM_Remark: '33'
        }
      ],
      folderColumns: [
        {
          title: '顺序号',
          field: 'FM_Index'
        },
        {
          title: '中文名',
          field: 'FM_OCName'
        },
        {
          title: '英文名',
          field: 'FM_OEName'
        },
        {
          title: '备注',
          field: 'FM_Remark'
        }
      ],
      modalTitle: '', // 全宗树弹出框标题
      dialogFormVisible: false, // 全宗树弹出框显示与隐藏
      form1: this.$form.createForm(this),
      form2: this.$form.createForm(this),
      FMConfig: {
        modalTitle: '', // 门类归档方式弹出框标题
        modalVisible: false // 门类归档方式弹出框显示与隐藏
      },
      classConfig: {
        modalVisible: false, // 数据关联弹框显示与隐藏
        classData: [ // 数据关联弹框数据
          {
            title: '诉讼档案',
            key: '1'
          },
          {
            title: '科技以卷整理',
            key: '2'
          },
          {
            title: '文书以件整理',
            key: '3'
          },
          {
            title: '声像以件整理',
            key: '4'
          },
          {
            title: '诉讼档案',
            key: '5'
          },
          {
            title: '科技以卷整理',
            key: '6'
          },
          {
            title: '文书以件整理',
            key: '7'
          },
          {
            title: '声像以件整理',
            key: '8'
          }
        ],
        targetKeys: [] // 数据关联弹框右侧框数据的 key 集合
      }
    }
  },
  created () {},
  mounted () {
  },
  methods: {
    // 左侧显示与隐藏事件
    treeToggle () {
      this.isShowLeftTree = !this.isShowLeftTree
    },
    // 全宗树按钮事件 val代表类型，add：全宗新增，edit：全宗编辑，del：全宗删除
    floderClick (val) {
      switch (val) {
        case 'add':
          this.modalTitle = '全宗新增'
          this.dialogFormVisible = true
          this.form1.resetFields() // 表单清空
          break
        case 'edit':
          this.modalTitle = '全宗编辑'
          this.dialogFormVisible = true
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        default:
          break
      }
    },
    // 门类归档方式按钮事件 val代表类型，add：归档方式新增，edit：归档方式编辑，del：归档方式删除
    FMClick (val, row) {
      switch (val) {
        case 'add':
          this.FMConfig.modalTitle = '归档方式新增'
          this.FMConfig.modalVisible = true
          this.form2.resetFields() // 表单清空
          break
        case 'edit':
          this.FMConfig.modalTitle = '归档方式编辑'
          this.FMConfig.modalVisible = true
          this.$nextTick(() => { // 表单赋值
            this.form2.setFieldsValue(pick(row, ['FM_OCName', 'FM_OEName', 'Sys_Remark', 'FM_Index', 'FM_Remark']))
          })
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        default:
          break
      }
    },
    handleChange (nextTargetKeys, direction, moveKeys) {
      this.classConfig.targetKeys = nextTargetKeys
    }
  }
}
</script>
<style lang="less" scoped>
.folder-manage {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0;
  background: #f0f2f5;
  .card-table {
    height: 100%;
    .folder-left {
      float: left;
      width: 18%;
      height: 100%;
      border: 1px solid #EBEEF5;
      border-right: none;
      position: relative;
      transition: all 0.2s;
      .folder-left-tree {
        height: 100%;
        overflow: auto;
      }
      .handle {
        position: absolute;
        right: -18px;
        top: 50%;
        margin-top: -32px;
        z-index: 100;
        cursor: pointer;
      }
    }
    .folder-right {
      float: left;
      width: 82%;
      height: 100%;
      transition: all 0.2s;
      .folder-right-top {
        height: 50%;
      }
      .folder-right-bottom {
        height: 50%;
      }
    }
  }
}
</style>
